<template>
    <!-- 我的账户 修改密码 -->
    <div class="wrapper" v-show="showPasswordChange">
        <div id="wrap">
                <p class="title">{{title}}</p>
                <p class="circle">
                    <span :class="password.length>=index+1?'bgc':''" v-for="(item,index) in circle" :key="index"></span>
                </p>
                <div class="keyboard">
                    <div v-for="(items,indexs) in keyNumber" :key="indexs">
                        <span :class="item===activeIndex?'fff':''" @click="getNumber(item)" v-for="(item,index) in items" :key="index">
                            {{ item }}
                        </span>
                    </div>
                    <div class="zero">
                        <span :class="activeIndex==='0'?'fff':''" @click="getZero($event)">0</span>
                    </div>
                </div>
                <div class="dele">
                    <div :class="activeIndex==='dele'?'fff':''" class="arrow"></div>
                    <div :class="activeIndex==='dele'?'fff':''" @click="deleNum" class="deleBtn">删除</div>
                </div>
                <span @click="quxiao" class="quxiao" href="">取消</span>
                <a class="forget" v-show="isShowForget" href="">忘记密码?</a>
        </div>
    </div>
    
</template>

<script>
export default {
    name: 'passwordChange.vue',
    props: ['showPasswordChange'],
    data(){
        return{
            title: '请输入旧密码',
            isShowForget: true,
            keyNumber:[ //保存按键值
                [1,2,3],
                [4,5,6],
                [7,8,9],
            ],
            fff: '',
            activeIndex: -1,
            circle: [
                {
                    value: ''
                },
                {
                    value: ''
                },
                {
                    value: ''
                },
                {
                    value: ''
                },
                {
                    value: ''
                },
                {
                    value: ''
                },
            ],
            password: [],    //用来储存密码
            isTrue: false   //用来判定是否密码输入满6位
        }
    },
    watch:{
        password: function(){
            if( this.password.length >= 6 ){
                // alert('输入正确')
                this.isTrue = true;
                this.activeIndex = -1
            }
        },
        isTrue: function(){
            if( this.isTrue ){
                this.title = '请输入新密码'
                this.isShowForget = false;
                this.password = [];
                
            }else{
                this.title = '请输入旧密码'
                this.isShowForget = true;
                this.password = [];
                this.activeIndex = -1;
            }
        }
    },
    methods:{
        //获取输入数值
        getNumber: function(val){
            if( this.password.length < 6 ){
                this.password.push(val);
                // console.log(this.password)
                // console.log(this.password.length)
                this.activeIndex = val;
            }
        },
        //获取0
        getZero: function(e){
            var a = e.target.innerHTML;
            if( this.password.length < 6 ){
                this.password.push(a);
                // console.log(this.password)
                // console.log(this.password.length)
                this.activeIndex = a;
            }

        },
        //删除函数
        deleNum: function(){
            this.activeIndex = 'dele';
            this.password.pop()
            // console.log(this.password);
        },
        //取消
        quxiao: function(){
            if( this.isTrue ){
                this.isTrue = false;
            }else{
                this.$emit('cancel');
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
    body
        position relative;

        .wrapper
            position fixed;
            width 100%;
            height 100%;
            top 0
            left 0
            right 0
            bottom 0
            background-color rgba(0,0,0,.2);
            z-index 1000
            #wrap
                position absolute;
                width 398px;
                height 520px;
                top 50%;
                left 50%;
                transform translate(-50%, -50%)
                background-color rgba(0,0,0,.6);

                .title
                    font-size 14px;
                    width 398px;
                    text-align center;
                    color #fff;
                    margin-top 53px;
                    margin-bottom 14px;
                .circle
                    margin-left 10px;
                    text-align center;

                    .bgc
                        background-color #fff;
                    span 
                        display inline-block;
                        width 12px;
                        height 12px;
                        margin-right 10px;
                        // background #fff;
                        border-radius 50%;
                        border 1px solid rgba(255,255,255,.5);
                .keyboard
                    height 292px;
                    width 274px;
                    // background-color #fff;
                    margin 48px auto;
                    // border 1px solid red;
                    display flex;
                    flex-direction column;
                    flex-wrap wrap;
                    justify-content space-between;
                    align-items center;
                    position relative;

                    div
                        width 274px;
                        height 54px;
                        display flex;
                        flex-direction row;
                        justify-content space-between;
                        // align-items center;
                        align-content center;
                        text-align center;
                
                        span
                            // margin-top 0;
                            display inline-block;
                            width 54px;
                            height 54px;
                            border 1px solid rgba(255,255,255,.5);
                            border-radius 50%;
                            font-size 24px;
                            color #fff;
                            text-align center;
                            line-height 54px;
                            cursor pointer;
                            // margin 0 auto;
                            // margin-right 29px;
                            // align-items flex-start;
                            user-select none;
                        .fff
                            background-color rgba(255,255,255,.5);
                    .zero
                        span 
                            margin 0 auto;
                            cursor pointer;
                        .fff
                            background-color rgba(255,255,255,.5);
                .dele
                    position absolute;
                    top 396px;
                    left 280px;
                    width 54px;
                    height 28px;
                    // border 1px solid red;
                    line-height 28px;
                    // text-align center;
                    font-size 14px;
                    color #fff;
                    cursor pointer;

                    .fff
                        background-color #858585;

                    .arrow
                        position absolute;
                        top 3px;
                        left 4px;
                        width 19px;
                        height 19px;
                        border 1px solid rgba(255,255,255,.5);
                        border-top none;
                        border-right none;
                        border-bottom-left-radius 3px;
                        transform rotate(45deg);
                        // border-top-left-radius 3px;
                        // border-bottom-right-radius 3px;
                    .deleBtn
                        position absolute;
                        right 0;
                        top -2px;
                        border 1px solid rgba(255,255,255,.5);
                        border-left none;
                        border-radius 4px;
                        width 40px;
                        text-align center;
                        user-select none;

                a
                    text-decoration none;
                    color #fff;
                    font-size 14px;
                .quxiao
                    display block;
                    position absolute;
                    bottom 18px;
                    margin-left -15px;
                    left 50%;
                    width 35px;
                    color #fff;
                    cursor pointer;
                .forget
                    display block;
                    position absolute;
                    width 72px;
                    right 20px;
                    bottom 18px;
                
               
</style>